<template>
     <div class="wrapper">
 			
 			<!-- header部分 -->
 			<header>
 				<p>用户注册</p>
 			</header>
 			
 			<!-- 表单部分 -->
 			<ul class="form-box">
 				<li>
 					<div class="title">
 						手机号码：
 					</div>
 					<div class="content">
 						<input type="text" v-model="user.userId" placeholder="手机号码">
 					</div>
 				</li>
 				<li>
 					<div class="title">
 						密码：
 					</div>
 					<div class="content">
 						<input type="password" v-model="user.password" placeholder="密码">
 					</div>
 				</li>
 				<li>
 					<div class="title">
 						确认密码：
 					</div>
 					<div class="content">
 						<input type="password" v-model="confirmPassword" placeholder="确认密码">
 					</div>
 				</li>
 				<li>
 					<div class="title">
 						用户姓名：
 					</div>
 					<div class="content">
 						<input type="text" v-model="user.userName" placeholder="用户姓名">
 					</div>
 				</li>
 				<li>
 					<div class="title">
 						性别：
 					</div>
 					<div class="content" style="font-size: 3vw;">
 						<input type="radio" v-model="user.userSex" value="1" checked style="width:6vw;height: 3.2vw;">男
 						<input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;">女
 					</div>
 				</li>
 			</ul>
 			
 			<div class="button-login">
 				<button @click="register()">注册</button>
 			</div>
 			
 			<!-- 底部菜单部分 -->
 			<ul class="footer">
 				<li onclick="location.href='index.html'">
 					<i class="fa fa-home"></i>
 					<p>首页</p>
 				</li>
 				<li>
 					<i class="fa fa-compass"></i>
 					<p>发现</p>
 				</li>
 				<li onclick="location.href='orderList.html'">
 					<i class="fa fa-file-text-o"></i>
 					<p>订单</p>
 				</li>
 				<li>
 					<i class="fa fa-user-o"></i>
 					<p>我的</p>
 				</li>
 			</ul>
 		</div>	
 </template>
 <script>
 export default {
     data() {
 		return {
 			user: {
                 userId:'',
                 password:'',
                 userName:'',
                 userSex:1
             },
             confirmPassword:''
 		}
     },
     methods: {
          checkUserById() {
 			if(this.user.userId == '') {
 				alert('用户的手机号不能为空');
 				return;
 			}
 			if(this.user.password == '') {
 				alert('密码不能为空');
 				return;
 			}
 			if(this.user.password != this.confirmPassword) {
 				alert('两次输入的密码不一致');
 				return;
 			}
 			if(this.user.userName == '') {
 				alert('用户名不能为空');
 				return;
 			}
 			//http://localhost:8080/elm/UserController/getUserById?userId=12345672222
             //向后端发送请求
             this.$axios.post('UserController/getUserById', this.$qs.stringify({
 				userId:this.user.userId
 			})).then(response=>{
                  if(response.data == 1) {
                     alert('此用户的手机号已存在');
                  }
             }).catch(error=>{
                 console.log(error);
             });
         },
         //http://localhost:8080/elm/UserController/saveUser?userId=18041331234&userName=fender&password=123456&userSex=1
         register() {
             //向后端发送请求
             this.$axios.post('UserController/saveUser', this.$qs.stringify(this.user))
             .then(response=>{
                  if(response.data > 0) {
                     alert('注册成功');
                     this.$router.go(-1); //返回到登录页面
                  }else {
                     alert('注册失败');
                  }
             }).catch(error=>{
                 console.log(error);
             });
         }
     }
 }
 </script>
 <style scoped>
     /****************** 总容器 ******************/
 .wrapper{
 	width: 100%;
 	height: 100%;
 }
 
 /****************** header部分 ******************/
 .wrapper header{
 	width: 100%;
 	height: 12vw;
 	background-color: #0097FF;
 	color: #fff;
 	font-size: 4.8vw;
 	
 	position: fixed;
 	left: 0;
 	top: 0;
 	z-index: 1000;
 	
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
 /****************** 表单部分 ******************/
 .wrapper .form-box{
 	width: 100%;
 	margin-top: 12vw;
 }
 .wrapper .form-box li{
 	box-sizing: border-box;
 	padding: 4vw 3vw 0 3vw;
 	display: flex;
 	align-items: center;
 }
 .wrapper .form-box li .title{
 	flex: 0 0 18vw;
 	font-size: 3vw;
 	font-weight: 700;
 	color: #666;
 }
 .wrapper .form-box li .content{
 	flex: 1;
 }
 .wrapper .form-box li .content input{
 	border: none;
 	outline: none;
 	width: 100%;
 	height: 4vw;
 	font-size: 3vw;
 }
 .wrapper .button-login{
 	width: 100%;
 	box-sizing: border-box;
 	padding: 4vw 3vw 0 3vw;
 }
 .wrapper .button-login button{
 	width: 100%;
 	height: 10vw;
 	font-size: 3.8vw;
 	font-weight: 700;
 	color: #fff;
 	background-color: #38CA73;
 	border-radius: 4px;
 	
 	border: none;
 	outline: none;
 }
 .wrapper .button-register{
 	width: 100%;
 	box-sizing: border-box;
 	padding: 4vw 3vw 0 3vw;
 }
 .wrapper .button-register button{
 	width: 100%;
 	height: 10vw;
 	font-size: 3.8vw;
 	font-weight: 700;
 	color: #666;
 	background-color: #EEE;
 	border-radius: 4px;
 	
 	border: none;
 	outline: none;
 	border: solid 1px #DDD;
 }
 /****************** 底部菜单部分 ******************/
 .wrapper .footer{
 	width: 100%;
 	height: 14vw;
 	border-top: solid 1px #DDD;
 	background-color: #fff;
 	
 	position: fixed;
 	left: 0;
 	bottom: 0;
 	
 	display: flex;
 	justify-content: space-around;
 	align-items: center;
 }
 .wrapper .footer li{
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	
 	color: #999;
 	user-select: none;
 	cursor: pointer;
 }
 .wrapper .footer li p{
 	font-size: 2.8vw;
 }
 .wrapper .footer li i{
 	font-size: 5vw;
 }
 </style>